<template>
  <div class="">
    <!-- 渐变背景装饰 -->
    <NavTop></NavTop>
    <div class="background-decoration"></div>

    <div class="content-wrapper">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-left">
          <div class="icon-wrapper">
            <svg class="header-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6Z" stroke="currentColor" stroke-width="2"/>
              <path d="M8 8H16M8 12H16M8 16H12" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="header-text">
            <h2 class="page-title">我的借阅记录</h2>
            <p class="page-subtitle">管理您的图书借阅情况</p>
          </div>
        </div>

        <div class="statistics">
          <div class="stat-card total">
            <div class="stat-number">{{ borrowList.length }}</div>
            <div class="stat-label">总计借阅</div>
          </div>
          <div class="stat-card pending" v-if="pendingCount > 0">
            <div class="stat-number">{{ pendingCount }}</div>
            <div class="stat-label">审核中</div>
          </div>
          <div class="stat-card overdue" v-if="overdueCount > 0">
            <div class="stat-number">{{ overdueCount }}</div>
            <div class="stat-label">逾期未还</div>
          </div>
        </div>
      </div>

      <!-- 过滤器 -->
      <div class="filter-section" v-if="borrowList.length > 0">
        <div class="filter-tabs">
          <button
              v-for="filter in filters"
              :key="filter.key"
              :class="['filter-tab', { active: activeFilter === filter.key }]"
              @click="activeFilter = filter.key"
          >
            {{ filter.label }}
            <span v-if="filter.count > 0" class="filter-count">{{ filter.count }}</span>
          </button>
        </div>
      </div>

      <!-- 表格容器 -->
      <div class="table-container">
        <div class="table-header">
          <h3 class="table-title">借阅详情</h3>
          <div class="table-actions">
            <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="$emit('refresh')"
                :loading="refreshing"
            >
              刷新数据
            </el-button>
          </div>
        </div>

        <el-table
            :data="filteredBorrowList"
            style="width: 100%"
            :empty-text="emptyText"
            stripe
            border
            :header-cell-style="tableHeaderStyle"
            :row-class-name="getRowClassName"
            v-loading="loading"
        >
          <el-table-column
              prop="borrow.bookName"
              label="图书信息"
              min-width="200"
              show-overflow-tooltip
          >
            <template #default="scope">
              <div class="book-info">
                <div class="book-cover">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 19.5A2.5 2.5 0 0 0 6.5 22H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6.5A2.5 2.5 0 0 0 4 4.5v15Z" stroke="currentColor" stroke-width="2"/>
                    <path d="M8 8h8M8 12h8M8 16h6" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
                <div class="book-details">
                  <div class="book-title">{{ scope.row.bookName || '未知书名' }}</div>
                  <div class="book-meta">
                    <span v-if="scope.row.book?.author" class="book-author">
                      作者: {{ scope.row.author }}
                    </span>
                    <span v-if="scope.row.isbn" class="book-isbn">
                      ISBN: {{ scope.row.isbn }}
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
              prop="borrowDate"
              label="借阅日期"
              width="130"
              sortable
          >
            <template #default="scope">
              <div class="date-cell">
                <el-icon class="date-icon"><Calendar /></el-icon>
                {{ formatDate(scope.row.borrowTime) }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
              prop="expectedReturnDate"
              label="预计归还"
              width="130"
              sortable
          >
            <template #default="scope">
              <div class="date-cell" :class="{ 'overdue-date': isOverdue(scope.row) }">
                <el-icon class="date-icon"><Clock /></el-icon>
                {{ formatDate(scope.row.dueTime) }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
              prop="actualReturnDate"
              label="实际归还"
              width="130"
              sortable
          >
            <template #default="scope">
              <div v-if="scope.row.returnTime" class="date-cell returned-date">
                <el-icon class="date-icon"><Check /></el-icon>
                {{ formatDate(scope.row.returnTime) }}
              </div>
              <div v-else class="date-cell not-returned">
                <el-icon class="date-icon"><Minus /></el-icon>
                未归还
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="120" align="center">
            <template #default="scope">
              <el-tag
                  :type="getStatusType(scope.row.status)"
                  :effect="formatStatus(scope.row.status) === 'OVERDUE' ? 'dark' : 'light'"
                  size="small"
                  class="status-tag"
              >
                <el-icon class="status-icon">
                  <component :is="getStatusIcon(scope.row.status)" />
                </el-icon>
                {{ formatStatus(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
              prop="rejectReason"
              label="备注信息"
              v-if="hasRejectedItems"
              min-width="160"
              show-overflow-tooltip
          >
            <template #default="scope">
              <div v-if="scope.row.rejectReason" class="reject-reason">
                <el-icon class="reason-icon"><Warning /></el-icon>
                {{ scope.row.rejectReason }}
              </div>
              <div v-else class="no-reason">无备注</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="160" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button
                    v-if="canReturn(scope.row)"
                    size="small"
                    type="primary"
                    plain
                    @click="handleReturn(scope.row.id)"
                    :loading="returnLoading === scope.row.id"
                    class="action-btn return-btn"
                >
                  <el-icon><Upload /></el-icon>
                  申请归还
                </el-button>

                <el-button
                    v-if="canCancel(scope.row)"
                    size="small"
                    type="warning"
                    plain
                    @click="handleCancel(scope.row.id)"
                    :loading="cancelLoading === scope.row.id"
                    class="action-btn cancel-btn"
                >
                  <el-icon><Close /></el-icon>
                  取消申请
                </el-button>

                <div v-if="!canReturn(scope.row) && !canCancel(scope.row)" class="no-action">
                  <el-icon><Lock /></el-icon>
                  无可用操作
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper" v-if="borrowList.length > pageSize">
          <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :total="filteredBorrowList.length"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, watch, reactive} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Calendar, Clock, Check, Minus, Warning, Upload, Close, Lock } from '@element-plus/icons-vue'
import NavTop from "@/components/NavTop.vue"
import {cancelBorrow, getBorrow, returnBook} from '@/api/borrow'

// 响应式数据
const returnLoading = ref(null)
const cancelLoading = ref(null)
const activeFilter = ref('all')
const currentPage = ref(1)
const pageSize = ref(20)
const borrowList = ref([])
const loading = ref(false)
const refreshing = ref(false)
const username = ref('')


const storedUser = sessionStorage.getItem('username');
username.value = storedUser || '游客'
// 计算属性
const hasRejectedItems = computed(() => {
  return borrowList.value.some(item => item.status === 'REJECTED')
})

const pendingCount = computed(() => {
  return borrowList.value.filter(item => item.status === 'PENDING').length
})

const overdueCount = computed(() => {
  return borrowList.value.filter(item => item.status === 'OVERDUE' || isOverdue(item)).length
})

const approvedCount = computed(() => {
  return borrowList.value.filter(item => item.status === 'APPROVED').length
})

const returnedCount = computed(() => {
  return borrowList.value.filter(item => item.status === 'RETURNED').length
})

const rejectedCount = computed(() => {
  return borrowList.value.filter(item => item.status === 'REJECTED').length
})



const user = reactive({
  userName: username,
  id: 1
})

const filters = computed(() => {
  return [
    { key: 'all', label: '全部', count: borrowList.value.length },
    { key: 'pending', label: '审核中', count: pendingCount.value },
    { key: 'approved', label: '已通过', count: approvedCount.value },
    { key: 'overdue', label: '逾期', count: overdueCount.value },
    { key: 'returned', label: '已归还', count: returnedCount.value },
    { key: 'rejected', label: '已拒绝', count: rejectedCount.value }
  ].filter(filter => filter.count > 0 || filter.key === 'all')
})

const filteredBorrowList = computed(() => {
  // 创建副本避免修改原数组
  let filtered = [...borrowList.value]

  if (activeFilter.value !== 'all') {
    filtered = filtered.filter(item => {
      // 确保status是数字类型
      const status = Number(item.status)

      switch (activeFilter.value) {
        case 'overdue':
          return isOverdue(item)
        case 0:   // 数字形式的0
          return status === 0
        case 1:   // 数字形式的1
          return status === 1
        case 2:   // 数字形式的2
          return status === 2
        default:
          return false
      }
    })
  }

  return filtered
})

const emptyText = computed(() => {
  if (loading.value) return '加载中...'
  if (borrowList.value.length === 0) return '暂无借阅记录'
  if (filteredBorrowList.value.length === 0) return `暂无${getFilterLabel()}记录`
  return '没有数据'
})

const tableHeaderStyle = computed(() => {
  return {
    background: 'linear-gradient(135deg, #667eaa 20% 10%)',
    color: '#ffffff',
    fontWeight: '600',
    fontSize: '14px'
  }
})

// 方法
const getFilterLabel = () => {
  const filter = filters.value.find(f => f.key === activeFilter.value)
  return filter ? filter.label : '相关'
}

const fetchBorrow = async () => {
  try {
    loading.value = true
    console.log(user)
    const response = await getBorrow(user)
    borrowList.value = response || []
  } catch (error) {
    ElMessage.error('获取借阅数据失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const formatStatus = (status) => {
  const statusMap = {
    0: '审核中',
    1: '已通过',
    2: '已拒绝',
    3: '已归还',
    4: '已逾期'
  }
  return statusMap[status] || status
}

const getStatusType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'success',
    2: 'danger',
    3: 'success',
    4: 'warning'
  }
  return typeMap[status] || 'info'
}

const getStatusIcon = (status) => {
  const iconMap = {
    0: 'QuestionFilled',
    1: 'SuccessFilled',
    2: 'CircleClose',
    3: 'SuccessFilled',
    4: 'Warning'
  }
  return iconMap[status] || 'InfoFilled'
}

const getRowClassName = ({ row }) => {
  if (isOverdue(row)) {
    return 'overdue-row'
  }
  return ''
}

const formatDate = (dateString) => {
  if (!dateString) return '-'

  try {
    const date = new Date(dateString)
    if (isNaN(date.getTime())) return dateString

    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  } catch (error) {
    console.warn('日期格式化错误:', error)
    return dateString
  }
}


const isOverdue = (row) => {
  if (!row) return false
  if (row.status === 'OVERDUE') return true
  if (row.returnTime) return false
  if (!row.dueTime) return false

  try {
    const expectedDate = new Date(row.dueTime)
    const now = new Date()
    return now > expectedDate
  } catch (error) {
    console.warn('逾期检查错误:', error)
    return false
  }
}

const canReturn = (row) => {
  return row && row.status === 1 && !row.returnTime
}

const canCancel = (row) => {
  return row && row.status === 2
}

const handleReturn = async (borrowId) => {
  if (!borrowId) {
    ElMessage.error('借阅记录ID无效')
    return
  }

  try {
    await ElMessageBox.confirm(
        '确认要申请归还这本书吗？',
        '归还确认',
        {
          confirmButtonText: '确认归还',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'confirm-dialog'
        }
    )

    returnLoading.value = borrowId
    const borrowDate = reactive({
      returnTime:new Date(),
      isOverdue:0,
      id:borrowId
    })
    await returnBook(borrowDate)

    await fetchBorrow()

  } catch (error) {
    if (error === 'cancel') {
      ElMessage({
        type: 'info',
        message: '已取消归还操作'
      })
    } else {
      console.error('归还操作错误:', error)
      ElMessage.error('操作失败，请重试')
    }
  } finally {
    returnLoading.value = null
  }
}

const handleCancel = async (borrowId) => {
  if (!borrowId) {
    ElMessage.error('借阅记录ID无效')
    return
  }

  try {
    await ElMessageBox.confirm(
        '确认要取消这个借阅申请吗？取消后需要重新申请。',
        '取消确认',
        {
          confirmButtonText: '确认取消',
          cancelButtonText: '保留申请',
          type: 'warning',
          customClass: 'confirm-dialog'
        }
    )

    cancelLoading.value = borrowId

    if (typeof cancelBorrow === 'function') {
      await cancelBorrow(borrowId)
    } else {
      emit('cancel-borrow', borrowId)
    }

    emit('cancel-success')
    ElMessage({
      type: 'success',
      message: '取消申请成功'
    })
  } catch (error) {
    if (error === 'cancel') {
      ElMessage({
        type: 'info',
        message: '已保留申请'
      })
    } else {
      console.error('取消申请失败:', error)
      ElMessage({
        type: 'error',
        message: '取消申请失败，请稍后重试'
      })
    }
  } finally {
    cancelLoading.value = null
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 监听器
watch(activeFilter, () => {
  currentPage.value = 1
})

// 初始化
fetchBorrow()
</script>

<style scoped>
.my-borrows-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
      radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 75, 102, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.content-wrapper {
  position: relative;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 1;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 32px;
  background: linear-gradient(135deg, #7086ec 0%, #eedbff 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  color: white;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.icon-wrapper {
  padding: 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.header-icon {
  width: 32px;
  height: 32px;
  color: white;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.page-subtitle {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
  font-weight: 400;
}

.statistics {
  display: flex;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.stat-card {
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  text-align: center;
  min-width: 100px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2);
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
}

.stat-card.total .stat-number {
  color: #ffffff;
}

.stat-card.pending .stat-number {
  color: #ffd93d;
}

.stat-card.overdue .stat-number {
  color: #ff6b6b;
}

/* 过滤器样式 */
.filter-section {
  margin-bottom: 24px;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
}

.filter-tab {
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.filter-tab:hover {
  background: #f5f7fa;
  color: #409eff;
}

.filter-tab.active {
  background: linear-gradient(135deg, #409eff, #36a3f7);
  color: white;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.filter-count {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.filter-tab.active .filter-count {
  background: rgba(255, 255, 255, 0.3);
}

/* 表格容器样式 */
.table-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid #f0f2f5;
}

.table-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1c2759;
}

.table-actions {
  display: flex;
  gap: 12px;
}

/* 表格内容样式 */
.book-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.book-cover {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f3e7ff, #efe9f6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.book-cover svg {
  width: 20px;
  height: 20px;
  color: white;
}

.book-details {
  flex: 1;
  min-width: 0;
}

.book-title {
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
  margin-bottom: 4px;
}

.book-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book-author,
.book-isbn {
  font-size: 12px;
  color: #909399;
  line-height: 1.3;
}

.date-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.date-icon {
  font-size: 14px;
  color: #909399;
}

.overdue-date {
  color: #f56c6c;
  font-weight: 600;
}

.overdue-date .date-icon {
  color: #f56c6c;
}

.returned-date {
  color: #67c23a;
  font-weight: 500;
}

.returned-date .date-icon {
  color: #67c23a;
}

.not-returned {
  color: #909399;
  font-style: italic;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
}

.status-icon {
  font-size: 12px;
}

.reject-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #f56c6c;
  font-size: 13px;
  line-height: 1.4;
}

.reason-icon {
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

.no-reason {
  color: #c0c4cc;
  font-style: italic;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.return-btn:hover {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.cancel-btn:hover {
  background: #e6a23c;
  color: white;
  border-color: #e6a23c;
}

.no-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #c0c4cc;
  font-size: 12px;
  font-style: italic;
}

/* 分页样式 */
.pagination-wrapper {
  padding: 24px 32px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #f0f2f5;
}

/* 表格行样式 */
:deep(.el-table__row) {
  transition: all 0.3s ease;
}

:deep(.el-table__row:hover) {
  background-color: #f8f9ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

:deep(.overdue-row) {
  background-color: #fef0f0;
}

:deep(.overdue-row:hover) {
  background-color: #fde2e2;
}

/* 表格头部样式优化 */
:deep(.el-table__header-wrapper) {
  border-radius: 0;
}

:deep(.el-table__header th) {
  border: none;
  padding: 16px 12px;
}

:deep(.el-table__body-wrapper) {
  border-radius: 0;
}

:deep(.el-table td) {
  border: none;
  padding: 16px 12px;
}

/* 加载状态样式 */
:deep(.el-loading-mask) {
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}

:deep(.el-loading-spinner) {
  margin-top: -25px;
}

:deep(.el-loading-text) {
  color: #409eff;
  font-weight: 500;
}

/* 空状态样式 */
:deep(.el-table__empty-block) {
  padding: 60px 0;
}

:deep(.el-table__empty-text) {
  color: #909399;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-wrapper {
    padding: 16px;
  }

  .page-header {
    padding: 24px;
  }

  .statistics {
    gap: 12px;
  }

  .stat-card {
    padding: 16px 20px;
    min-width: 80px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
  }

  .header-left {
    gap: 16px;
  }

  .icon-wrapper {
    padding: 12px;
  }

  .header-icon {
    width: 24px;
    height: 24px;
  }

  .page-title {
    font-size: 24px;
  }

  .page-subtitle {
    font-size: 14px;
  }

  .statistics {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .stat-card {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
  }

  .stat-number {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }

  .filter-tabs {
    padding: 6px;
  }

  .filter-tab {
    padding: 8px 16px;
    font-size: 13px;
  }

  .table-header {
    padding: 16px 20px;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .table-title {
    font-size: 18px;
  }

  .book-info {
    gap: 8px;
  }

  .book-cover {
    width: 32px;
    height: 32px;
  }

  .book-cover svg {
    width: 16px;
    height: 16px;
  }

  .action-buttons {
    gap: 6px;
  }

  .action-btn {
    font-size: 11px;
    padding: 4px 8px;
  }

  .pagination-wrapper {
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 12px;
  }

  .page-header {
    padding: 16px;
  }

  .header-left {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .statistics {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 8px;
  }

  .filter-tabs {
    gap: 4px;
  }

  .filter-tab {
    padding: 6px 12px;
    font-size: 12px;
  }

  .table-header {
    padding: 12px 16px;
  }

  .pagination-wrapper {
    padding: 12px 16px;
  }
}

/* 确认对话框样式 */
:deep(.confirm-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.confirm-dialog .el-message-box__header) {
  padding: 20px 20px 15px;
  background: linear-gradient(135deg, #1d3680 0%, #f3e7ff 100%);
  color: white;
}

:deep(.confirm-dialog .el-message-box__title) {
  font-weight: 600;
  color: white;
}

:deep(.confirm-dialog .el-message-box__content) {
  padding: 20px;
}

:deep(.confirm-dialog .el-message-box__btns) {
  padding: 15px 20px 20px;
  display: flex;
  gap: 12px;
}

:deep(.confirm-dialog .el-button) {
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 20px;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header,
.filter-section,
.table-container {
  animation: fadeInUp 0.6s ease-out;
}

.page-header {
  animation-delay: 0.1s;
}

.filter-section {
  animation-delay: 0.2s;
}

.table-container {
  animation-delay: 0.3s;
}

/* 滚动条样式 */
:deep(.el-table__body-wrapper)::-webkit-scrollbar {
  height: 8px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #000000, #764ba2);
  border-radius: 4px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #000000, #6a4190);
}

.filter-tabs::-webkit-scrollbar {
  height: 4px;
}

.filter-tabs::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 2px;
}

.filter-tabs::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 2px;
}

.filter-tabs::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 优化表格边框 */
:deep(.el-table--border) {
  border: none;
}

:deep(.el-table--border::after) {
  display: none;
}

:deep(.el-table--border::before) {
  display: none;
}

/* 状态标签动效 */
.status-tag {
  position: relative;
  overflow: hidden;
}

.status-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

.status-tag:hover::before {
  left: 100%;
}

/* 按钮点击效果 */
.action-btn {
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
  transform: translate(-50%, -50%);
}

.action-btn:active::before {
  width: 200px;
  height: 200px;
}

/* 统计卡片脉冲效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.stat-card.overdue {
  animation: pulse 2s infinite;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .my-borrows-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .table-container {
    background: #2d3748;
    color: #e2e8f0;
  }

  .filter-tabs {
    background: #2d3748;
  }

  .filter-tab {
    color: #e2e8f0;
  }

  .filter-tab:hover {
    background: #4a5568;
  }
}

/* 打印样式 */
@media print {
  .my-borrows-container {
    background: white;
  }

  .background-decoration {
    display: none;
  }

  .action-buttons,
  .table-actions,
  .filter-section {
    display: none;
  }

  .page-header {
    background: none;
    color: black;
    box-shadow: none;
  }

  .table-container {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}
</style>